<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2021-03-24</title>

    <!-- 外部样式-网络资源 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
    <!-- 内部样式 -->

    <style>
        /* 盒子 */
        .card {
            margin: 20px auto 0;
            width: 300px;
            height: 300px;
            /* background-color: #dfe4ea; */
            border: 1px solid #eee;
            border-radius: 4px;
        }

        .outer {
            padding: 8px;
        }

        .inner {
            margin: 20px;
            padding: 8px;
            width: 60px;
            height: 60px;
            background-color: #f0c244;
            border: 6px solid #ff6b81
        }

        .radius {
            border-radius: 4px;
        }

        /* 背景图 */
        .wrap-img {
            background-image: url('./pet.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: 0 0;
        }



        /* 定位 */
        .pos {
            position: relative;
        }

        .icon-heart {
            position: absolute;
            top: 20px;
            left: 20px;
            color: #ff6b81;
            font-size: 30px;
        }

        /*  */
        .card-s {
            background-color: #ff6b81
        }

        .card-xs {
            background-color: #ff6b81
        }
    </style>
</head>
<body>
    <h1 class="text-4xl my-7 text-center text-red-500">Learn CSS! 📦 🖼 📍</h1>
    <div class="text-gray-500 text-sm text-center my-6 underline">2021-03-25</div>



    <!-- 正式内容 begin  -->
    <main class="w-96 my-0 mx-auto p-10 border rounded-lg shadow-sm ">

        <!-- 盒子 -->
        <div class="card outer">
            <div class="inner radius"></div>
        </div>

        <!-- 背景图 -->
        <div class="card wrap-img"></div>

        <!-- 定位 -->
        <div class="card pos">
            <i class="fa fa-star icon-heart"></i>
        </div>
    </main>
    <!-- 正式内容 end  -->
    <a href="https://gitee.com/guangzan/front-end-training/tree/master/2021-03-25/note" target="_blank">
        <button
            class="block mx-auto my-6  w-full sm:w-auto flex-none bg-gray-900 hover:bg-gray-700 text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200">
            查看源代码 <i class="fa fa-code"></i></button>
    </a>
</body>
</html>
